import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: 750, height: 1334);

    return Scaffold(
        appBar: PreferredSize(
            child: AppBar(
              // title:
              title: Row(children: <Widget>[
                SizedBox(
                  width: ScreenUtil().setWidth(150),
                ),
                // Image.network("http://www.beitop.com/bpjs/img/logo.png",width: ScreenUtil().setWidth(48),),
                Image.asset(
                  "images/logo.png",
                  width: ScreenUtil().setWidth(48),
                ),
                SizedBox(
                  width: ScreenUtil().setWidth(10),
                ),
                Text(
                  "北排建设应急管理平台",
                  style: TextStyle(fontSize: ScreenUtil().setSp(32)),
                ),
              ]),
            ),
            preferredSize: Size.fromHeight(ScreenUtil().setHeight(80))),
        body: Column(children: <Widget>[
          new Banners(),
          Container(
            color: Colors.white,
            height: ScreenUtil().setHeight(ScreenUtil().setHeight(820)),
            padding: EdgeInsets.only(top:ScreenUtil().setHeight(40)) ,
            child: new ServiceCategories(),
          ),
          SizedBox(
            height: ScreenUtil().setHeight(20),
          ),
          TileBiao(),
        ]));
  }
}

//首页banner
class Banners extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> imagest = new List();
    imagest.add("http://www.beitop.com/bpjs/img/banner2.jpg");
    imagest.add("http://www.beitop.com/bpjs/img/banner1.jpg");
    return Container(
      child: new Container(
          height: ScreenUtil().setHeight(150),
          child: Swiper(
            itemCount: imagest.length,
            autoplay: true,
            //是否自动播放
            autoplayDelay: 3000,
            //item数量
            itemBuilder: (BuildContext context, int index) {
              //item构建
              return new Image.network(
                imagest[index],
                fit: BoxFit.fill,
              );
            },
          )),
    );
  }
}

//列表视图
class ServiceCategories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    List<ServiceItemView> serviceItemViews = new List();
    serviceItemViews.add(ServiceItemView(icon: "images/home/f1.gif",title: "抢险工程"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f2.gif",title: "物料管理"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f3.gif",title: "库存管理"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f4.gif",title: "车辆档案"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f5.gif",title: "维修管理"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f6.gif",title: "车辆租赁"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f7.gif",title: "年检记录"));
    serviceItemViews.add(ServiceItemView(icon: "images/home/f8.gif",title: "更多"));

    // return GridView.count(
    //   // controller: ,
    //   crossAxisCount: 4,
    //   padding: EdgeInsets.symmetric(vertical: 0),
    //   children: serviceItemViewModels.map((item) => ServiceItem(item)).toList(),
    //  //physics
    // );
    // .physics(
    //   NeverScrollableScrollPhysics:false,
    // );
    return Container(
      
      height: ScreenUtil().setHeight(450),
      child:GridView.builder(
        padding: EdgeInsets.only(bottom: 5),
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              // mainAxisSpacing:20,
              ),
        physics: new NeverScrollableScrollPhysics(),
        itemCount: serviceItemViews.length,
        itemBuilder: (BuildContext context, int index) {
          return ServiceItem(serviceItemViews[index]);
        },
      )
    );
    
  }
}

class ServiceItem extends StatelessWidget {
  // final ServiceItemViewModel data;
  final ServiceItemView data;


  ServiceItem(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      // padding: EdgeInsets.only(bottom: 5),
      child: Column(
        children: <Widget>[
          // Expanded(child: this.data.icon),
          Container(child: Image.asset(
                  this.data.icon,
                  width: ScreenUtil().setWidth(90),
                ),),
          Text(
            this.data.title,
            style: TextStyle(
              fontSize: ScreenUtil().setSp(35),
              color: Color(0xFF333333),
            ),
          ),
        ],
      ),
    );
  }
}

class TileBiao extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(100),
      padding: EdgeInsets.fromLTRB(20,0,20,0),
      color: Colors.white,
      child: Row(
      
        mainAxisAlignment:MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            "抢险物资管理",
            style: TextStyle(
              color: Color(0xFF333333),
              fontSize: ScreenUtil().setSp(35)
            ),
          ),
          Text(
            "全部分类",
            style: TextStyle(
              color: Color(0xFFacafbf),
              fontSize: ScreenUtil().setSp(25)
            ),
          ),
        ]
       
      ),
    );
  }
}

class ServiceItemView {
  /// 图标
  final String icon;

  /// 标题
  final String title;

  const ServiceItemView({
    this.icon,
    this.title,
  });
}
